<template>
  <el-dialog draggable v-model="visible" :close-on-click-modal="false" :title="title" v-if="value" @close="close" ref="dialogDrag" class="ZHLX-dialog common-dialogDrag" id="cursor-dialogDrag" lock-scroll append-to-body width="1040px" :modal-append-to-body="false" style="height: 694px;">
    <div class="top-tabs">
      <el-tabs v-model="selectType" class="demo-tabs" @tab-change="changeSelectTypeHandle">
        <el-tab-pane label="自定义" :name="1"></el-tab-pane>
        <el-tab-pane label="组织" :name="2"></el-tab-pane>
        <el-tab-pane label="人员" :name="3"></el-tab-pane>
      </el-tabs>
    </div>
    <!-- 中间的列表选择 -->
    <div class="unit-select-list-container">
      <transition name="el-fade-in-linear">
        <div class="right-pane">
          <!-- 搜索区域 -->
          <div class="search-container">
            <el-input prefix-icon="el-icon-search" :placeholder="selectType == 1 || selectType == 2 ? '请输入组织名称' : '请输入姓名/字母'" v-model="lefTopSearchInput"
              @keyup.enter="searchClick" clearable style="width: 100%;"></el-input>
          </div>
          <div class="content-wapper content-wapper-left">
            <div class="content-top">
              <!-- 自定义 -->
              <el-tree-v2  v-show="selectType == 1 && (customLoading || !customLoading && defaultUnitList.filter(item => !item.isHide).length)" :height="470" :data="defaultUnitList.filter(item => !item.isHide)" :props="{ label: 'name', children: 'children', id: 'id' }" ref="custorUnitTree" v-loading="customLoading"
                :default-checked-keys="unitIdList" :show-checkbox="true" @check="treeNodeClick" check-on-click-node 
                node-key="id" :item-size="28" empty-text="">
                <template v-slot:default="{ node }">
                  <div class="custom-tree-node">
                    <div class="text" :title="node.label">
                      <SvgIcon icon-class="icon-zidingyi-bianji" class="zhlxiconfont-sys" :size='13' color='rgb(151, 151, 151)' style="margin-right: 5px;"/>
                      {{ node.label }}
                    </div>
                  </div>
                </template>
              </el-tree-v2>
              <template v-if="selectType == 1 && !customLoading && !defaultUnitList.filter(item => !item.isHide).length">
                <el-empty image-size="130" :description="lefTopSearchInput ? '未查询到结果' : '暂无数据'"></el-empty>
              </template>
              <!-- 组织区域 -->
              <el-tree-v2 v-show="selectType == 2 && (treeLoading || !treeLoading && unitListAll.length)" :height="470" v-loading="treeLoading" :data="unitListAll" :default-checked-keys="unitIdList"
              :show-checkbox="true" @check="treeNodeClick"
              check-on-click-node :check-strictly="true" ref="unitTree" :expand-on-click-node="false" :props="defaultProps" @node-expand="loadNodeData" node-key="id" :item-size="28" empty-text="">
                <template #default="{ node, data }">
                  <el-icon class="is-loading" v-if="data.childLoading" style="margin-right: 4px;">
                    <Loading />
                  </el-icon>
                  <!-- 单位 -->
                  <span v-if="data.tag === '0' || data.tag === '2'" class="iconfont icon-gongsi"></span>
                  <!-- 部门 -->
                  <span v-if="data.tag === '3'" class="icon-lx icon-lx-tree-organization3"></span>
                  <!-- 项目 -->
                  <el-icon v-if="data.tag === '4'" color="#ec8b0f" style="margin-right: 5px">
                    <Suitcase />
                  </el-icon>
                  <!-- 没有数据权限提示 -->
                  <el-tooltip v-if="data.isLock" class="item" effect="dark" content="没有数据权限" placement="right-start">
                    <span>{{ node.label }}
                      <SvgIcon iconClass="ele-Lock" />
                    </span>
                  </el-tooltip>
                  <span v-if="!data.isLock" class="overflow-ellipsis" :title="node.label">{{ node.label }}</span>
                </template>
              </el-tree-v2>
              <template v-if="selectType == 2 && !treeLoading && !unitListAll.length">
                <el-empty image-size="130" :description="lefTopSearchInput ? '未查询到结果' : '暂无数据'"></el-empty>
              </template>
              <!-- 人员 -->
              <el-tree-v2 ref="userTree" v-show="selectType == 3 && (personLoading || !personLoading && peopleList.length)" :height="470" :data="peopleList" :props="{ label: 'name', children: 'children', value: 'userId' }" :default-checked-keys="unitIdList" :show-checkbox="true" @check="treeNodeClickPeople" class="btn_bottom"
              check-on-click-node
                node-key="id" :item-size="50" v-loading="personLoading" empty-text="" style="overflow: auto">
                <template v-slot:default="{ node, data }">
                  <span class="custom-tree-node">
                    <div class="text" :title="getNodeValue(node, data)">
                      <el-avatar style="backgroundColor: rgb(177, 197, 243); width: 32px; height: 32px;">
                        <el-icon color="#d0dcf8;" size="20">
                          <UserFilled />
                        </el-icon>
                      </el-avatar>
                      <span class="text-custom-right">
                          <div class="text-label overflow-ellipsis">{{ getNodeValue(node, data).split(" — ")[0] }}</div>
                          <div class="text-unit overflow-ellipsis">{{ getNodeValue(node, data).split(" — ")[1] }}</div>
                      </span>
                    </div>
                  </span>
                </template>
              </el-tree-v2>
              <template v-if="selectType == 3 && !personLoading && !peopleList.length">
                <el-empty image-size="130" :description="lefTopSearchInput ? '未查询到结果' : '暂无数据'"></el-empty>
              </template>
            </div>
          </div>
        </div>
      </transition>
      <div class="left-pane">
        <!-- 搜索区域 -->
        <div class="search-container">
          <span class="text">已选
            <span class="text-length">({{unitList.length}})</span>
          </span>
          <el-input prefix-icon="el-icon-search" placeholder="请输入姓名/组织"  v-model="leftSearchInput" clearable style="width: 240px;"
            @keyup.enter="handleSearch(unitList, leftSearchInput)"></el-input>
          <el-button style="padding-left: 10px; font-size: 14px;" type="primary" link @click="addNew">添加自定义</el-button>
          <el-button type="primary" style="font-size: 14px;" link @click="deleteAll">清空</el-button>
        </div>
        <!-- 搜索区域结束 -->
        <div class="content-wapper content-wapper-right">
          <el-scrollbar style="height: 100%" ref="unitListRef">
            <template v-for="(item, index) in unitList" :key="item.id">
              <div class="select-item" :class="{ 'focused': item.id == isFocused }" v-if="!item.isHide">
                <div class="content-container">
                  <SvgIcon icon-class="icon-yidongshu" class="zhlxiconfont-sys option-drag" size='18' color='rgb(200 208 217)' />
                  <el-avatar style="backgroundColor: rgb(0, 113, 233); width: 32px; height: 32px; margin-right: 8px;">
                    <SvgIcon :icon-class="getIconByType(item.objectType)" class="zhlxiconfont-sys" :size='16' color='#ffffff' />
                  </el-avatar>
                  <span class="text-custom-right" style="width: 300px;" v-if="item.organize">
                      <el-input v-model="item.name" :title="item.name" style="width: 280px;" placeholder="请输入单位名称" size="small" @focus="handleFocus(item.id)" @blur="handleBlur"></el-input>
                      <div class="text-unit overflow-ellipsis" style="width: 280px;" :title="item.organize">{{ item.organize }}</div>
                  </span>
                  <span style="width: 300px;" class="text-custom-right" v-else>
                    <el-input v-model="item.name" style="width: 280px;" placeholder="请输入单位名称" @focus="handleFocus(item.id)" @blur="handleBlur" ></el-input>
                  </span>
                  <el-input title="显示后缀" v-model="item.append" class="append-class" @focus="handleFocus(item.id)" @blur="handleBlur" ></el-input>
                </div>
                <div class="unit-remove">
                   <el-button type="primary" link>
                    <el-icon size="20">
                      <Delete @click="removeItem(index, item)" />
                    </el-icon>
                   </el-button>
                </div>
              </div>
            </template>
            <template v-if="!unitList.filter(item => !item.isHide).length">
              <el-empty image-size="130" :description="leftSearchInput ?  '未查询到结果' : '暂无数据'"></el-empty>
            </template>
          </el-scrollbar>
        </div>
      </div>
    </div>
    <!-- 中间的列表选择结束 -->
    <template #footer>
      <div>
        <el-button size="default" @click="close">取消</el-button>
        <el-button type="primary" size="default" @click="saveUnitData">选择</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { defaultUnitList } from "./data.js";
import { getPersonListAPI, getDeptTreeParent, carbonCopylist } from "@/api/admin/dept";
import SvgIcon from '@/components/svg-icon/index.vue'
import Sortable from "sortablejs"
export default {
  name: "unitDialog",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    unitList: {
      type: Array,
      default () {
        return [];
      },
    },
    title: {
      type: String,
      default: "选择",
    },
  },
  components: { SvgIcon },
  watch: {
    value: {
      handler: async function (val) {
        this.visible = val;
        if (val) {
          this.getUnitList();
        }
      },
      immediate: true,
    },
    lefTopSearchInput (val, oldVal) {
      if (!val && oldVal) {
        this.searchClick()
      }
    },
    leftSearchInput (val, oldVal) {
      if (!val && oldVal) {
        this.handleSearch(this.unitList, this.leftSearchInput)
      }
    },
    rightSearchInput () {
      this.searchRight();
      this.$refs.unitTree && this.$refs.unitTree.filter(this.rightSearchInput);
    },
    peopleList(val) {
      if (val?.length) {
        setTimeout(() => {
          const scrollWrap = document.querySelector('.btn_bottom .el-tree-virtual-list');
          scrollWrap?.removeEventListener('scroll', this.handleSetScroll);
          scrollWrap?.addEventListener('scroll', this.handleSetScroll);
        }, 0);
      }
    },
    visible(val) {
      if(val) {
        this.$nextTick(() => {
          this.initSortable();
        })
      } else {
        this.sortable && this.sortable.destroy();
      }
    }
  },
  data () {
    return {
      unitAllList: [],
      tabType: "only", // tab选中的
      nowActive: "value", // 已选择
      timer: null,
      peopleList: [], // 人员列表
      unitListAll: [], // 组织列表
      defaultUnitList: [], // 常用项
      leftSearchInput: "", // 左侧检索的数据
      rightSearchInput: "", // 右侧区域检索的数据
      isGetData: false, // 懒加载是否正在请求
      visible: this.value,
      selectType: 1,
      selectType1: 1,
      lefTopSearchInput: "",
      // 默认树属性
      defaultProps: {
        children: "children",
        label: "name",
        isLeaf: "isLeaf",
        value: "id",
      },
      customLoading: false,
      // 树loading
      treeLoading: false,
      // 人员区域loading
      personLoading: false,
      // sortable实例
      sortable: null,
      // 分页页数
      pageCurrent: 1,
      // 分页总数
      pageTotal: 0,
      isFocused: false
    };
  },
  computed: {
    getNodeValue () {
      return (node, data) => {
        if (data.type === "company" || data.type === "department") {
          return node.label;
        }
        return node.label + " — " + data.organize;
      };
    },
    showSelect (item) {
      return (item) => {
        return item.name.indexOf(this.leftSearchInput) > -1;
      };
    },
    rightSearch () {
      return (item) => {
        return item.name.indexOf(this.rightSearchInput) > -1;
      };
    },
    isDeaggable () {
      return (config) => {
        return !this.unitList.some(
          (item) => item.id === config.id
        );
      };
    },

    defaultKeys () {
      return this.unitAllList.map((item) => item.id);
    },

    unitIdList () {
      return this.unitList.map((item) => item.id);
    },
  },
  created () {
  },
  methods: {
    newCheck () {

    },
    changeSelectTypeHandle (val) {
      this.resetForm()
      this.searchClick()
    },
    searchRight () {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        this.handleGetLoadTree();
      }, 300);
    },
    loadNode2 (node, resolve) {
      if (this.tabType !== "people") return;
      if (node.level === 0) {
        this.nodeId = "0";
        return resolve([]);
      }
      getLoadTree({
        keyword: this.rightSearchInput,
        organizeId: node.data.id,
      }).then((res) => {
        resolve(this.updateKeyName(res.data));
      });
    },
    filterNode (value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    treeNodeClick (data, node) {
      let objectType = ''
      if (data.tag === '0' || data.tag === '2') {
        objectType = 'unit'
      } else if (data.tag === '3') {
        objectType = 'organize'
      } else {
        objectType = 'edit'
      }
      if (this.isDeaggable(data)) {
        this.unitList.push({ name: data.name, id: data.id, append: "、", objectType, organize: data.organize || ''});
      } else {
        this.unitList.splice(
          this.unitList.findIndex((item) => item.id === data.id),
          1
        );
      }
    },
    treeNodeClickPeople (data, node) {
      if (this.isDeaggable(data)) {
        this.unitList.push({ name: data.name, id: data.userId, objectType: 'user',  append: "、", organize: data.organize || '' });
      } else {
        this.unitList.splice(
          this.unitList.findIndex((item) => item.id === data.userId),
          1
        );
      }
    },
    updateKeyName (tree) {
      if (Array.isArray(tree)) {
        // 如果是数组，递归处理每个元素
        return tree.map((item) => this.updateKeyName(item));
      } else if (typeof tree === "object" && tree !== null) {
        // 如果是对象，递归处理每个属性
        const updatedObject = {};
        for (const key in tree) {
          if (key === "fullName") {
            // 将fullName改为name
            updatedObject["name"] = this.updateKeyName(tree[key]);
          } else {
            updatedObject[key] = this.updateKeyName(tree[key]);
          }
        }
        return updatedObject;
      } else {
        // 其他情况直接返回
        return tree;
      }
    },
    onMove (e) {
      let dragElement = e.draggedContext.element;
      let isHave = this.unitList.some(
        (item) => item.name === dragElement.name || item.id === dragElement.id
      );
      return !isHave;
    },
    cloneComponent (origin) {
      return {
        name: origin.name,
        id: origin.id,
        append: "、",
      };
    },
    addNew () {
      // 点击新增的事件
      this.unitList.unshift({
        name: "",
        append: "、",
        id: +new Date()
      })
    },
    /**
     * 获取单位列表
     * @returns 无返回值
     */
    async getUnitList () {
      // await this.getDeptartmentList()
      // 设置默认分隔符
      this.customLoading = true
      this.unitList.forEach((item) => { !item.append && (item.append = "、") })
      await this.getPersonList(1)
      // 获取自定义列表
      const res = await carbonCopylist();
      this.defaultUnitList = res.data.map((item) => {
        return {
          ...item,
          append: "、",
        };
      });
      this.customLoading = false
    },
    /**
     * 获取部门列表
     * @returns 无返回值，将处理后的部门列表赋值给 this.unitListAll
     */
    async getDeptartmentList () {
      this.$refs.unitTree.setExpandedKeys([])
      this.treeLoading = true
      const list = await this.getDepartmentData()
      this.processDepartmentData(list)
      this.unitListAll = this.updateKeyName(list);
      this.renderTree()
      this.treeLoading = false
      list.length && this.collapseTreeNode(list[0].id)
    },
    /**
     * 获取部门数据
     * @param parentId 父级部门ID
     * @returns 返回处理后的部门数据
     */
    async getDepartmentData (parentId) {
      try {
        const res = await getDeptTreeParent({ parentId, deptName: this.lefTopSearchInput });
        const processedData = this.processDepartmentData(res.data);
        return processedData;
      } catch (error) {
        this.$message.error('Error fetching department data:', error);
        return [];
      }
    },
    /**
     * 获取人员列表
     * @returns 无返回值，通过更新组件的 `peopleList` 属性来展示人员列表
     */
    getPersonList(page) {
  // 如果已经在加载数据，则直接返回
  if (this.personLoading) {
    return;
  }
 
  // 设置加载状态为正在加载
  this.personLoading = true;
 
  // 如果是第一页，则重置当前页码和人员列表
  if (page === 1) {
    this.pageCurrent = 1;
    this.peopleList = [];
  } else {
    // 否则，增加当前页码
    this.pageCurrent += 1;
  }
 
  // 发送请求获取人员列表
      getPersonListAPI({
        name: this.lefTopSearchInput,
        current: this.pageCurrent,
        size: 20,
        hideFlag: 0, // 1-隐藏，0-不隐藏 默认查询不隐藏的人员
        personnelScope: 1,// 1-展示全部人员 0-展示当前组织下人员
      }).then(res => {
        // 如果请求成功，则更新人员列表和总页数
        if (res.ok) {
          // 假设 updateKeyName 只处理传入的数据，并返回新数据
          const newData = this.updateKeyName(res.data.records);
          // 将新数据添加到现有数据的末尾
          this.peopleList = [...this.peopleList, ...newData];
          this.pageTotal = res.data.total;
        }
      }).catch(error => {
        // 处理请求错误（例如显示错误消息）
        console.error('Error fetching person list:', error);
        // 可能还需要在这里重置加载状态或进行其他错误处理
      }).finally(() => {
        // 无论请求成功还是失败，都重置加载状态
        this.personLoading = false;
      });
    },
    /**
     * 处理部门数据
     * @param data 部门数据
     * @returns 处理后的部门数据
     */
    processDepartmentData (data) {
      const deep = (item) => {
        // 设置objectType属性
        item.objectType = 'organize';
        item.id = item.deptId
        // 处理子节点
        // if (item.children && item.children.length > 0) {
        //   item.children.forEach(deep); // 递归处理子节点
        // } else 
        if (item.hasChild) {
          // 如果没有子节点但标记为有子节点，则设置一个禁用的占位子节点
          item.children = [{}];
        }
      };
      data.forEach(deep); // 处理顶层节点
      return data;
    },
    /**
     * 自定义分级加载数据
     * @param data 当前展开节点
     */
    async loadNodeData (data) {
      if (data.children && data.children[0] && data.children[0].id) { return; }
      data.childLoading = true
      data.children = []
      this.renderTree()
      const list = await this.getDepartmentData(data.id)
      if (list && list.length) {
        data.children = list
      }
      this.renderTree()
      data.childLoading = false
    },
    /**
     * 重新渲染tree数据
     */
    renderTree () {
      this.$refs.unitTree.setData(this.unitListAll);
    },
    /**
     * 折叠树节点
     * @param id 节点ID
     * @returns 无返回值
     */
    collapseTreeNode (id) {
      // 延迟折叠节点，确保树组件已准备好
      const treeRef = this.$refs.unitTree;
      if (treeRef) {
        setTimeout(() => {
          treeRef.collapseNode(treeRef.getNode(id));
        }, 0);
      }
    },
    /**
     * 根据搜索框的输入值过滤列表项
     */
    searchClick () {
      if (this.selectType == 1) {
        this.handleSearch(this.defaultUnitList, this.lefTopSearchInput)
      } else if (this.selectType == 2) {
        this.getDeptartmentList()
      } else {
        this.getPersonList(1)
      }
    },
    /**
     * 搜索列表并处理隐藏属性
     * @param list 列表数据
     * @param key 搜索关键词
     * @returns 无返回值
     */
    handleSearch (list, key) {
      list.forEach(item => {
        if (key) {
          if (!item.name || !item.name.includes(key)) {
            item.isHide = true
          } else {
            item.isHide = false
          }
        } else {
          item.isHide = false
        }
      })
    },
    /**
     * 重置表单
     */
    resetForm () {
      this.lefTopSearchInput = ''
    },
    close () {
      this.resetForm()
      this.selectType = 1
      this.$emit("changeVisiable", false);
    },
    pushUnitList () {
      // 点击新增的事件
      this.unitList.unshift({
        name: "新增数据",
        append: "、",
        id: +new Date(),
      });
    },
    saveUnitData () {
      // 去除最后一个分隔符
      this.unitList && this.unitList.length && (this.unitList[this.unitList.length - 1].append = "");
      this.$emit("updateUnitList", this.unitList);
      this.close();
    },
    removeItem (index, item) {
      this.unitList.splice(index, 1);
      // 自定义
      if (this.$refs.custorUnitTree.getCheckedKeys().indexOf(item.id) > -1) {
        this.$refs.custorUnitTree.setCheckedKeys(this.$refs.custorUnitTree.getCheckedKeys().filter((key) => key != item.id));
      } else if (this.$refs.unitTree.getCheckedKeys().indexOf(item.id) > -1){
        this.$refs.unitTree.setCheckedKeys(this.$refs.unitTree.getCheckedKeys().filter((key) => key != item.id));
      } else if (this.$refs.userTree.getCheckedKeys().indexOf(item.id) > -1) {
        this.$refs.userTree.setCheckedKeys(this.$refs.custorUnitTree.getCheckedKeys().filter((key) => key != item.id));
      }
    },
    deleteAll () {
      this.$confirm("确定清空所有数据？", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        modalClass: 'custom-confirm-class'
      }).then(() => {
        this.unitList.splice(0, this.unitList.length);
        this.$refs.custorUnitTree.setCheckedKeys([])
        this.$refs.unitTree.setCheckedKeys([])
        this.$refs.userTree.setCheckedKeys([])
      }).catch(() => { });
    },
    /**
     * 人员列表滚动事件监听
     * @param e 事件对象
     */
    handleSetScroll(e) {
      if (e.target.scrollHeight - e.target.scrollTop - e.target.clientHeight <= 10) {
        if (this.peopleList?.length && this.peopleList?.length == this.pageTotal) {
          this.$message.success("已加载全部数据")
          document.querySelector('.btn_bottom .el-tree-virtual-list')?.removeEventListener('scroll', this.handleSetScroll);
          return;
        }
        this.getPersonList();
      }
    },
    /**
     * 获取iconfont图标
     * @param objectType 数据类型
     * @param tag 组织类型 tag -（0组织 2单位 ）， 4项目 ， 3部门
     */
    getIconByType(objectType = 'edit') {
      let data = {
        'organize': 'icon-a-bumenzuzhishu1',//组织
        'unit': 'icon-a-danweizuzhi',//单位
        'object': 'icon-xiangmu',//项目
        'user': 'icon-renyuan',//人员
        'role': 'icon-jiaose',//角色
        'post': 'icon-a-gangweilingdao',//岗位
        // 'relativePost': 'icon-xiangduigangwei',//相对岗位
        'relativeRelation': 'icon-xiangduiguanxi',//相对关系
        'group': 'icon-zu1',//组
        'circulation': 'icon-zu1',//传阅
        'edit': 'icon-zidingyi-bianji'
      }
      return data[objectType]
    },
    //表格拖动排序
    initSortable() {
      if (!this.$refs.unitListRef.$el) {
        setTimeout(() => {
          this.initSortable()
        }, 200);
        return
      }
      const el = this.$refs.unitListRef.$el.querySelector('.el-scrollbar__view');
      this.sortable = Sortable.create(el, {
        onEnd: (evt) => {
          const movedItem = this.unitList.splice(evt.oldIndex, 1)[0];
          this.unitList.splice(evt.newIndex, 0, movedItem);
        },
        forceFallback: true,
        animation: 150,
        handle: '.option-drag',
        ghostClass: 'sortable-ghost',
        chosenClass: 'sortable-chosen',
        dragClass: 'sortable-drag',
      });
    },
    handleFocus(id) {
      this.isFocused = id;
    },
    handleBlur() {
      this.isFocused = false;
    }
  },
};
</script>

<style lang="scss" scoped>
.content-container {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom-left-radius: unset;
  border-bottom-right-radius: unset;
  height: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  .overflow-ellipsis{
    flex: none;
    white-space: nowrap;
    /* 防止文字换行 */
    overflow: hidden;
    /* 隐藏超出容器的文字 */
    text-overflow: ellipsis;
  }
  .text-custom-right {
    margin-left: 5px;
    .text-label {
      line-height: 20px;
      color: rgb(51, 51, 51);
      font-size: 14px;
    }
    .text-unit {
      line-height: 18px;
      color: rgb(153, 153, 153);
      font-size: 12px;
    }
  }
  .left-pane {
    display: flex;
    align-items: center;
    .icon {
      margin-right: 5px;
    }
  }
  .right-pane {
    display: flex;
    align-items: center;
    .icon {
      margin-right: 5px;
    }
  }
}

.header-btn-wrapper {
  margin-bottom: 8px;
}

::v-deep .el-tree-node {
  // border-bottom: 1px solid #dcdfe6;

  .text {
    display: flex;
    align-items: center;
    padding-top: 10px;
    height: 28px;
    line-height: 28px;
    font-size: 14px;
    ::v-deep .el-icon {
      margin-right: 5px;
      position: relative;
      top: 2px;
    }
    .text-custom-right {
      margin-left: 5px;
      width: 400px;
      .text-label {
        line-height: 20px;
        color: rgb(51, 51, 51);
        font-size: 14px;
      }
      .text-unit {
        line-height: 18px;
        color: rgb(153, 153, 153);
        font-size: 12px;
      }
    }
  }
  .overflow-ellipsis{
    white-space: nowrap;
    /* 防止文字换行 */
    overflow: hidden;
    /* 隐藏超出容器的文字 */
    text-overflow: ellipsis;
  }
}
.top-tabs {
  height: 54px;
}
.unit-select-list-container {
  height: calc(100% - 54px);
  width: 100%;
  display: flex;
  justify-content: space-between;

  h2 {
    font-size: 15px;
    font-weight: bold;
    /*height: calc(100% - 74px - 28px);*/
  }

  .left-pane {
    width: 500px;
    position: relative;
    border: 1px solid #e6e6e6;
    border-left: none;
    padding: 0 0 12px;
    box-sizing: border-box;
    overflow: hidden;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;

    &::v-deep .el-scrollbar__view {
      height: 100%;
    }

    &::v-deep .el-tabs__header {
      margin-bottom: 0;
    }
  }

  .right-pane {
    width: 500px;
    position: relative;
    border: 1px solid #e6e6e6;
    padding: 0 0 12px;
    box-sizing: border-box;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;

    &::v-deep .el-tabs__header {
      margin-bottom: 0;
    }

    &::v-deep .el-tabs.el-tabs--top {
      height: 100%;

      .el-tabs__content {
        height: 90%;

        .el-tab-pane {
          height: 100%;
        }
      }
    }
  }

  .content-wapper.content-wapper-right {
    ::v-deep .el-input__wrapper {
      box-shadow: none;
      background-color: transparent;
    }
  }

  .content-wapper {
    height: calc(100% - 40px);
    overflow: hidden;

    .content-top {
      height: 100%;
      overflow: hidden;
      // border-bottom: 1px solid #e6e6e6;
      box-sizing: border-box;
    }

    ::v-deep .el-input-group__append {
      box-shadow: none;
    }

    ::v-deep .el-input__inner {
      box-shadow: none;
      font-size: 14px;
      line-height: 32px;
    }
  }

  .search-container {
    // width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;

    .text {
      display: inline-block;
      width: 80px;
      line-height: 32px;
      .text-length {
        color: rgb(153, 153, 153);
      }
    }

    ::v-deep .el-radio-group {
      width: 150px;
      margin-right: 12px;
    }

    ::v-deep .el-button--small {
      height: 32px;
      font-size: 14px;
    }

    ::v-deep .el-input {
      width: 130px;
    }
  }
  .select-item:hover {
    background-color: rgba(24, 144, 255, 0.07);
  }
  .select-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0 12px;
    border-radius: 4px;
    font-size: 16px;
    // 文本不可选中
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Internet Explorer/Edge */
    user-select: none;         /* Non-prefixed version*/
    &.focused {
      background-color: rgba(24, 144, 255, 0.07);
    }
    .text-custom-right {
      ::v-deep .el-input__inner {
        /* 防止文字换行 */
        overflow: hidden;
        /* 隐藏超出容器的文字 */
        text-overflow: ellipsis;
      }
    }
    .append-class {
      width: 32px;
      ::v-deep .el-input__wrapper {
        border-radius: 4px;
        padding: 0;
        padding-left: 6px;

        .el-input__inner {
          border: 1px solid rgb(191, 191, 191);
          padding: 0 1px;
        }
      }
 
    }
    .select-line-icon {
      margin-right: 8px;
      cursor: no-drop;
    }

    .option-drag {
      cursor: move;
      margin: 0 7px;
      padding: 8px 5px;
    }

    .content-container {
      width: 100%;
      /* 当文字超出容器时显示省略号 */
      &::v-deep .el-input__inner {
        border-top: 0;
        border-left: 0;
        border-right: 0;
        border-bottom-left-radius: unset;
        border-bottom-right-radius: unset;
        border-radius: 4px;
      }
      &::v-deep .el-input__wrapper {
        padding: 0;
      }
      &::v-deep .el-input__wrapper.is-focus .el-input__inner {
        border: 1px solid rgb(24, 144, 255);
        padding-left: 5px;
      }
      ::v-deep .el-icon {
        margin-right: 8px;
        position: relative;
        top: 2px;
      }
    }

    .unit-remove {
      cursor: pointer;
      width: 35px;
      height: 26px;
      text-align: center;
    }
  }
}

.NameClass {
  color: #1890ff;
  margin-right: 5px;
  height: 33px;
  line-height: 33px;
}

.icon-lx-tree-organization3:before {
  margin-right: 5px;
  color: #ec8b0f;
}

.custom-tree-node :deep(.text) {
  height: 100%;
  padding: 0 !important;
}
</style>
<style lang="scss">
.handle {
  cursor: move;
}
#cursor-dialogDrag .el-dialog__body {
  padding-top: 0 !important;
}
.custom-confirm-class {
  z-index: 3000 !important;
}
</style>